Blueprints: add Blueprints filtering #1607

ezr-ondrej · 2024-01-29T08:37:42Z

Enables Blueprints filtering.
Given this is a server side filtering, it also adds Debounce hook.
This hook enables delay the API request to save server roundtrips.

Refs HMS-3389

Screencast.from.2024-01-30.10-19-03.webm

amirfefer

Thanks @ezr-ondrej ! looks and works great 👍
I left a few inline comments, and also I've found a small glitch once clearing the search input:

Screen.Recording.2024-01-29.at.14.43.21.mov

amirfefer · 2024-01-29T12:15:27Z

src/Components/LandingPage/LandingPage.tsx

+  const [searchQuery, blueprintsFilter, setBlueprintsFilter] =
+    useDebouncedSearch('', 500);


I won't block this custom hook, but lodash has debounce implementation already, why not using it and keep it as regular state?

import _debounce from 'lodash/debounce'; const debounceFn = useCallback(_debounce(setBlueprintsFilter, 500), []); <SearchInput placeholder="Search by name or description" value={filter} onChange={(_event, value) => debounceFn(value)} onClear={() => onChange('')}

Also, 500 ms feels a bit long to me, would 300 be better? Thinking of this delay (and also fetching time), how would be adding a spinner or another indicator?

because I did not find a way how to use lodash debounce 😛
Definitelly on looks better, let me improve it! 👍

:)
I'm thinking that backend and frontend filtering would work the best together , we already have up to 100 blueprints records in the store by default, we can filter it locally by default for instant result, and update the store if there were any updates from the debounced query. though I think this enhancement can be implemented as a follow up as part of general optimistic updating refactor.

That's IMO amazing idea, we should discuss it with Andrew Dewar, he did quite a lot of optimistic updating, we can get some lessons learned :)

Wow... it's amazing, just 200 ms less and it really feels much smoother experience.
So I've read about it because I was amazed and I've learned that smooth feeling is when the interaction computer <-> human is below 400ms, cool

src/Components/LandingPage/LandingPage.tsx

amirfefer · 2024-01-29T12:45:43Z

src/Components/Blueprints/BlueprintsSideBar.tsx

@@ -61,7 +81,7 @@ const BlueprintsSidebar = ({
        <StackItem>
          <SearchInput


A nice a addition for the search input is adding the resultsCount prop for rendering a counter badge, i.e

I've used count blueprints it feels more user friendly, but kinda long, so I'm not strongly for that, happy to go just with the number if you'd think it's better ;)

agree, feels friendly and verbose, but a bit too long IMHO

amirfefer · 2024-01-29T12:48:59Z

src/Components/Blueprints/BlueprintsSideBar.tsx

+                onClear={() => onChange('')}
+              />
+            </StackItem>
+            <StackItem>No Blueprints found</StackItem>


How about using the empty state design ?

ezr-ondrej · 2024-01-30T09:21:40Z

Thanks for the amazing pointers Amir, I've incorporated almost all of them :)
Just the optimistic search is missing, but that would be an amazing followup IMO - as you say, we will have most of the blueprints loaded in majority of cases :)

amirfefer

Thanks @ezr-ondrej ! works smoothly indeed 👍
just a minor nitpick

amirfefer · 2024-01-30T21:33:14Z

src/Components/Blueprints/BlueprintsSideBar.tsx

 }: blueprintProps) => {
-  const [blueprintFilter, setBlueprintFilter] = useState('');
+  const blueprintsCount = blueprints?.length || 0;


This is just the fetched data length, we can use the meta object for the query search count :)

You're completely right! :)
Adding that.

amirfefer · 2024-01-30T21:37:18Z

src/Components/LandingPage/LandingPage.tsx

@@ -85,6 +102,8 @@ export const LandingPage = () => {
              blueprints={blueprints?.data}
              selectedBlueprint={selectedBlueprint}
              setSelectedBlueprint={setSelectedBlueprint}
+              filter={blueprintsSearchQuery}


I.e, adding -

blueprintsCount={blueprints?.meta.count}

ezr-ondrej · 2024-01-31T09:34:28Z

hmm while adding the blueprintsTotal, I've realized we can move the query to the sidebar, the only information is the selected blueprint. So I've moved everything else down to the sidebar component.

It looks bit cleaner on the LandingPage component side.
I didn't change anything, just moved the query and added the total. WDYT? :)

amirfefer

LGTM thanks @ezr-ondrej 👍

lavocatt · 2024-02-01T09:04:13Z

Thanks for working on this! I've got an issue with the filter not filtering on msw :
Screencast from 2024-02-01 10-02-23.webm
to reproduce, spin up the frontend with npm run stage-beta:msw+experimental

ezr-ondrej · 2024-02-01T09:57:01Z

to reproduce, spin up the frontend with npm run stage-beta:msw+experimental

For me it still loads up data from the server 🤔

ezr-ondrej · 2024-02-01T12:33:21Z

/retest

lavocatt · 2024-02-01T13:38:05Z

/retest

ezr-ondrej · 2024-02-01T16:36:59Z

/retest

lavocatt

🚀 This works great! Thanks a lot.

lavocatt · 2024-02-02T08:47:06Z

/retest

ezr-ondrej · 2024-02-02T11:20:27Z

/retest

Enables Blueprints filtering. Given this is a server side filtering, it also ads Debounce hook. This hook enables delay the API request to save server roundtrips. Refs HMS-3389

lavocatt · 2024-02-02T13:09:05Z

/retest

lavocatt · 2024-02-02T13:10:15Z

@jrusz can you have a look at why the tests are failing please? We've been restarting them a bunch of time without any success.

jrusz · 2024-02-02T13:46:38Z

@jrusz can you have a look at why the tests are failing please? We've been restarting them a bunch of time without any success.

Yeah there is some more widespread issue happening, other consoledot apps are seeing the same issue in their pr_check jobs... Nobody seems to know what's wrong yet... I believe that this should be ok to merge though as this should be behind the feature flag.

lavocatt · 2024-02-02T13:52:41Z

Yeah there is some more widespread issue happening, other consoledot apps are seeing the same issue in their pr_check jobs... Nobody seems to know what's wrong yet... I believe that this should be ok to merge though as this should be behind the feature flag.

Thanks for the heads up, I'm merging then.

ezr-ondrej force-pushed the blueprint_filtering branch from 6ed6d90 to 43585e7 Compare January 29, 2024 08:56

amirfefer requested changes Jan 29, 2024

View reviewed changes

ezr-ondrej force-pushed the blueprint_filtering branch 2 times, most recently from de521a7 to 3236536 Compare January 30, 2024 09:18

amirfefer reviewed Jan 30, 2024

View reviewed changes

ezr-ondrej force-pushed the blueprint_filtering branch from 3236536 to 47e72fd Compare January 31, 2024 09:32

ezr-ondrej force-pushed the blueprint_filtering branch from 47e72fd to 3af6c24 Compare January 31, 2024 09:34

lucasgarfield requested a review from lavocatt January 31, 2024 10:32

amirfefer approved these changes Jan 31, 2024

View reviewed changes

lavocatt force-pushed the blueprint_filtering branch from 3af6c24 to f0fd731 Compare February 1, 2024 08:48

ezr-ondrej force-pushed the blueprint_filtering branch from f0fd731 to 367af83 Compare February 1, 2024 10:37

ezr-ondrej force-pushed the blueprint_filtering branch 3 times, most recently from f6eb8da to c22f12f Compare February 1, 2024 16:16

lavocatt approved these changes Feb 2, 2024

View reviewed changes

Blueprints: add Blueprints filtering

80d785f

Enables Blueprints filtering. Given this is a server side filtering, it also ads Debounce hook. This hook enables delay the API request to save server roundtrips. Refs HMS-3389

regexowl force-pushed the blueprint_filtering branch from c22f12f to 80d785f Compare February 2, 2024 11:56

lavocatt merged commit c447244 into osbuild:main Feb 2, 2024
2 of 3 checks passed

ezr-ondrej deleted the blueprint_filtering branch February 2, 2024 14:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blueprints: add Blueprints filtering #1607

Blueprints: add Blueprints filtering #1607

ezr-ondrej commented Jan 29, 2024 •

edited

Loading

amirfefer left a comment •

edited

Loading

amirfefer Jan 29, 2024

amirfefer Jan 29, 2024 •

edited

Loading

ezr-ondrej Jan 29, 2024

amirfefer Jan 29, 2024 •

edited

Loading

ezr-ondrej Jan 30, 2024

ezr-ondrej Jan 30, 2024

amirfefer Jan 29, 2024

ezr-ondrej Jan 30, 2024

amirfefer Jan 30, 2024

amirfefer Jan 29, 2024

ezr-ondrej commented Jan 30, 2024

amirfefer left a comment

amirfefer Jan 30, 2024

ezr-ondrej Jan 31, 2024

amirfefer Jan 30, 2024 •

edited

Loading

ezr-ondrej commented Jan 31, 2024

amirfefer left a comment

lavocatt commented Feb 1, 2024

ezr-ondrej commented Feb 1, 2024

ezr-ondrej commented Feb 1, 2024

lavocatt commented Feb 1, 2024

ezr-ondrej commented Feb 1, 2024

lavocatt left a comment

lavocatt commented Feb 2, 2024

ezr-ondrej commented Feb 2, 2024

lavocatt commented Feb 2, 2024

lavocatt commented Feb 2, 2024

jrusz commented Feb 2, 2024

lavocatt commented Feb 2, 2024

		const [searchQuery, blueprintsFilter, setBlueprintsFilter] =
		useDebouncedSearch('', 500);

		@@ -61,7 +81,7 @@ const BlueprintsSidebar = ({
		<StackItem>
		<SearchInput

Blueprints: add Blueprints filtering #1607

Blueprints: add Blueprints filtering #1607

Conversation

ezr-ondrej commented Jan 29, 2024 • edited Loading

amirfefer left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amirfefer Jan 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amirfefer Jan 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ezr-ondrej commented Jan 30, 2024

amirfefer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amirfefer Jan 30, 2024 • edited Loading

Choose a reason for hiding this comment

ezr-ondrej commented Jan 31, 2024

amirfefer left a comment

Choose a reason for hiding this comment

lavocatt commented Feb 1, 2024

ezr-ondrej commented Feb 1, 2024

ezr-ondrej commented Feb 1, 2024

lavocatt commented Feb 1, 2024

ezr-ondrej commented Feb 1, 2024

lavocatt left a comment

Choose a reason for hiding this comment

lavocatt commented Feb 2, 2024

ezr-ondrej commented Feb 2, 2024

lavocatt commented Feb 2, 2024

lavocatt commented Feb 2, 2024

jrusz commented Feb 2, 2024

lavocatt commented Feb 2, 2024

ezr-ondrej commented Jan 29, 2024 •

edited

Loading

amirfefer left a comment •

edited

Loading

amirfefer Jan 29, 2024 •

edited

Loading

amirfefer Jan 29, 2024 •

edited

Loading

amirfefer Jan 30, 2024 •

edited

Loading